<template>
  <aside class="aside">
    <ul class="sideUl" v-show="this.$store.state.msg===true">
      <li class="liOne"><img src="../../assets/images/per.png" alt=""><span>请登录</span></li>
      <router-link to="/index"><li @click="change()">首页</li></router-link>
      <li class="white" @click="lyn('myLynkco')">
        我是领克
        <ul class="iamLyn" v-show="this.$store.state.lyn===true">
          <router-link to="/meetLynk"><li @click.stop="change()">遇见领克</li></router-link>
          <li @click.stop="">新闻潮汛</li>
          <li @click.stop="">品牌活动</li>
          <li @click.stop="">成为经销商</li>
        </ul>
      </li>
      <li class="white" @click="kinds('kindsCar')">
        全系车型
        <ul class="kinds" v-show="this.$store.state.kinds===true">
          <li @click.stop="">01</li>
          <li @click.stop="">01PHEV</li>
          <li @click.stop="">01HEV</li>
          <li @click.stop="">02</li>
          <li @click.stop="">02PHEV</li>
          <li @click.stop="">03</li>
          <li @click.stop="">03+</li>
          <li @click.stop="">03PHEV</li>
          <li @click.stop="">05</li>
          <li @click.stop="">06</li>
          <li @click.stop="">智能科技</li>
        </ul>
      </li>
      <li class="white" @click="buy('buyCar')">
        即刻购车
        <ul class="buy" v-show="this.$store.state.buy===true">
          <li @click.stop="">领克商城</li>
          <li @click.stop="">灵活用车</li>
          <li @click.stop="">经销商查询</li>
          <li @click.stop="">试乘试驾</li>
        </ul>
      </li>
      <li class="white" @click="server('enjoyServe')">
        智享服务
        <ul class="serve" v-show="this.$store.state.server===true">
          <li @click.stop="">首任车主 终身质保</li>
          <li @click.stop="">终身道路教授</li>
          <li @click.stop="">服务活动</li>
          <li @click.stop="">原厂糖装附件</li>
          <li @click.stop="">原厂纯正零件</li>
          <li @click.stop="">废旧动力电池回收公示</li>
        </ul>
      </li>
      <li>Co:Club</li>
      <li>WTCR</li>
      <li>88</li>
      <li>Co:Lab</li>
      <li>加入我们</li>
      <li>联系我们</li>
      <li>网站地图</li>
    </ul>
    <!--动态组件-->
    <components :is="this.$store.state.bd"></components>
  </aside>
</template>

<script>

  import myLynkco from "./myLynkco";
  import kindsCar from "./kindsCar";
  import buyCar from "./buyCar";
  import enjoyServe from "./enjoyServe";
    export default {
        name: "Vaside",
        components:{
          myLynkco:myLynkco,
          kindsCar:kindsCar,
          buyCar:buyCar,
          enjoyServe:enjoyServe
        },
      methods:{
        lyn(a){
          this.$store.commit('lyn');
          this.$store.state.kinds=false;
          this.$store.state.buy=false;
          this.$store.state.server=false;
          this.$store.state.bd=a;
          // console.log(this.$store.state.list[0].bd);
          // console.log(this.$store.state.bd);
          // console.log(111)

          },
        kinds(a){
          this.$store.commit('kinds');
          this.$store.state.lyn=false;
          this.$store.state.buy=false;
          this.$store.state.server=false;
          this.$store.state.bd=a;
          console.log(222)
        },
        buy(a){
          this.$store.commit('buy');
          this.$store.state.kinds=false;
          this.$store.state.lyn=false;
          this.$store.state.server=false
          this.$store.state.bd=a;
        },
        server(a){
          this.$store.commit('server');
          this.$store.state.kinds=false;
          this.$store.state.buy=false;
          this.$store.state.lyn=false;
          this.$store.state.bd=a;
        },
        change(){
          this.$store.state.msg=false;
          this.$store.state.bd='';
          this.$store.state.lyn=false;
          // console.log(this.$store.state.msg)
        }
      }
    }
</script>

<style scoped>
  a{
    text-decoration: none;
  }
  /*.aside{*/
  /*  overflow: auto;*/
  /*}*/
  .aside .sideUl{
    height:100%;
    overflow: auto;
    width: 43%;
    position: fixed;
    top:50px;
    right: 0;
    background: black;
    opacity: 0.85;
    z-index: 5;
    /*display: none;*/
  }
  .aside .sideUl li{
    float: none;
    font-size: 12px;
    display: block;
    text-align: left;
    line-height: 30px;
    color:grey;
    position: relative;
    margin: 0px 20px;
  }
  .aside .sideUl>li::before{
    content: "";
    position: absolute;
    width: 136%;
    height: 0.2px;
    background: grey;
    left: -20px;
    top:0;
  }
  .aside .sideUl .white{
    color: white;
  }
  .aside .sideUl .liOne span{
    position: relative;
    top:-15px;
    left: 20px;

  }
  .aside .sideUl .liOne img{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: grey;
    margin-top: 15px;
  }
</style>
